<template>
  <!-- 实验性ui -->
  <div class="layout" :class="animBounceInUp">

    <div class="body">
      <el-card class="aside">
        <el-collapse v-model="activeNames">
          <el-collapse-item v-for="i in classList" :title="i.cmd +'-'+i.actionSimpleName" name="1"
                            @click="onSelClass(i.cmd)">
            <div v-for="k in methodList">
              <el-tooltip class="box-item" effect="dark" :content="k.comment" placement="right">
                <el-button @click="onSelMethod(k)"
                           :style="{'background-color':  k.methodName===selMethod ? '#DCE2F1':''}">
                  {{ selClass }}-{{ k.subCmd }} {{ k.methodName }}
                </el-button>
              </el-tooltip>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-card>
      <div class="right">
        <el-card class="desc" >
          <div v-if="selMethod != null">
            <div>
              路由: cmd:  {{ selClass }} subCmd: {{selMethod.cmd}} =  cmdMerge: {{selMethod.cmdMerge}}
            </div>
            <div>
              方法描述:{{selMethod.comment}}
            </div>
            <div>
              参数类: {{selMethod.paramClazzName}}
            </div>
            <div>
              返回类: {{selMethod.returnTypeClazzName}}
            </div>
            <div>
              是否会有异常抛出: {{selMethod.throwException}}
            </div>
          </div>

        </el-card>
        <div class="params">
          <el-button v-if="selMethod!==''" type="primary" @click="onSend">发送
          </el-button>
          <div class="aside-param">
            <el-form label-position="left" label-width="75px">
              <el-form-item :label="key" v-for="(val, key, index) in paramMap">
                <el-tooltip class="box-item" effect="dark" :content="methodParams[index].type" placement="right">
                  <el-input v-model="paramMap[key]"></el-input>
                </el-tooltip>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <el-card class="result">
          <pre>{{ result }}</pre>
        </el-card>
      </div>
    </div>
  </div>
</template>


<script setup>
import {animBounceInUp} from "../assets/anim";
import axios from "axios";
import {initWebSocket} from "../util/webSocket";
import {ref} from 'vue'

const activeNames = ref()
// ws链接
let classList = ref([])//类列表
let methodList = ref([])//方法列表
let paramMap = ref(null)//参数map
let selClass = ref(0)//选择类
let selMethod = ref(null)//选择方法
let result = ref("") //结果
let methodParams = ref("")//方法参数


// 获取选择的cls的所有方法
function onSelClass(v) {
  selClass.value = v;
  axios.get("/cmd/" + v, {params: {key: v}}).then((response) => {
    methodList.value = response.data
  })
}

// 获取方法参数
function onSelMethod(v) {
  selMethod.value = v
  paramMap.value = {}
  methodParams.value = v.actionParamFieldDtoList
  for (let k in v.actionParamFieldDtoList) {
    let classKey = v.actionParamFieldDtoList[k].name
    //list.value.push(classKey)
    paramMap.value[classKey] = ""
  }
  console.log(paramMap.value)
}

axios.get("/cmd").then((response) => {
  classList.value = response.data
})

let webSocket = initWebSocket("ws://localhost:18080/client");
webSocket.onmessage = (e) => {
  // 需要转换一下
  let parse = JSON.parse(e.data);
  result.value = JSON.parse(parse.data)
}

function onSend() {
  let message = {}
  message.data = paramMap.value
  message.cmdMerge = selMethod.value.cmdMerge
  message.responseStatus = 0
  console.log(message)
  webSocket.send(JSON.stringify(message))
}
</script>

<style scoped lang="scss">
* {
  background-color: #FFFFFF;
}

.layout {
  height: 100%;

  .body {
    height: 100%;
    display: flex;

    .el-card, .params {
      margin: 4px;
    }



    .aside {
      overflow-y: scroll;
      width: 500px;
      .el-button {
        margin-bottom: 4px;
        width: 100%;
      }
    }

    .right {
      width: 100%;
      display: flex;
      flex-direction: column;
    }

    .desc {
      flex-grow: 1;
    }

    .params {
      display: flex;
      flex-direction: row;
      height: 30%;

      .el-button {
        width: 100px;
        height: 100%;
      }

      .aside-param{
        overflow-y: scroll;
        margin: 16px;
        width: 100%;
        .el-input{
          width: 95%;
        }
      }
    }

    .result {
      overflow-y: scroll;
      font-size: 18px;
      height: 35%;
    }


  }
}
</style>